<%--
  Created by IntelliJ IDEA.
  User: 张洋垠Orange
  Date: 2025/6/3
  Time: 16:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<html>
<head>
    <title>Title</title>
</head>
<%--layout-css--%>
<style>
    html{
        height: 100%;
        font-size: 1rem;
    }
    body{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    *,*:after,*:before{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body,.ul-box,.actlive-li,.li-children,.header{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #layout{
        width: 100%;
        height: 100%;
    }

    .view{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        /*background: linear-gradient(-225deg, #a0fcff, #fafcff);*/
        background-size: 200% 100%;
    }

/*    */

</style>
<%--hander-css--%>
<style>
    .header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 6rem;
        background-color: #333333;
        padding: 0 1rem 0 0;
        border-bottom: 3px solid #56bdff;
        z-index: 9999;
    }
    .welcome-admin-box,.time-show-box{

    }
    .welcome-admin-box>a{
        background: linear-gradient(-225deg, #ff9600, #fff700);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .welcome-admin-box>.time-show{
        font-size: 1.1rem;
        background: linear-gradient(-225deg, #ff5e00, #6dfff4);
        background-size: 100% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-left: 3rem;
    }
    #journey-font{
        color: white;
        font-size: 1.1rem;
    }
    .logo-show{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: auto;
    }
</style>
<%--ul-css--%>
<style>
    .ul-box,.windows-box{
        margin-top: 6rem;
    }
    .ul-box{
        border: 5px solid #333333;
        border-top: none;
        width: 250px;
        height: 100%;
        justify-content: start;
        flex-direction: column;
        align-items: start;
        overflow-y: auto;
        margin-top: -0.1rem;
        padding-top: 6rem;
        background-color: #333333;
    }
    .ul-box::-webkit-scrollbar{
        display: none;
    }
    .ul-li-box{
        width: 100%;
        flex-direction: column;
    }
    .actlive-li{
        background-color: #2f2f2f;
        width: 100%;
        height: 60px;
        border-bottom: 3px solid #757575;
        /*border-radius: 0 0 32px 0;*/
        color: white;
        cursor: pointer;
        transition: 500ms;
        transform: translateX(0rem);
        /*box-shadow: 0 0 30px black;*/
    }
    /*.actlive-li:hover{*/
    /*    transform: translateX(1rem);*/
    /*}*/
    .li-selected{
        background: linear-gradient(-225deg, #21c3ff, #ffffff);
        background-size: 200% 100%;
        animation: liback 5s infinite linear;
        color: black;
        /*border: 3px solid #fff700;*/
    }
    @keyframes liback {
        0%{
            background-position: 0 0;
        }
        50%{
            background-position: 100% 0;
        }
        100%{
            background-position: 0 0;
        }
    }
    .li-children{
        display: none;
        width: 100%;
        height: 60px;
        border-bottom: 3px solid #737373;
        background-color: #2b2b2b;
        cursor: pointer;
        color: #bababa;
        font-size: 0.9rem;
        box-shadow: 0 0 20px #000000;
    }
    .li-children:hover{
        background-color: #98e3ff;
        color: #000000;
    }
</style>
<%--window-show-css--%>
<style>
    .windows-box{
        width: 100%;
        height: 100%;
    }
    .windows-box>iframe{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        border: none;
    }
</style>
<body>
<div id="layout">
    <div class="header">
        <div class="logo-show">
            <img src="img/未标题-1.png" width="120px" height="90px" alt="">
            <span id="journey-font">布丁酒店管理系统</span>
        </div>
        <div class="welcome-admin-box" style="margin-left: auto">
            <%--     a标签内放存到域中的用户名       --%>
            <span style="color: white;font-size: 1.2rem">欢迎你!&nbsp;&nbsp;</span><a style="font-size: 1.2rem;" href="">admin</a><span class="time-show">2000-1-1 12:00:00</span>
        </div>

    </div>
    <div class="view">
        <%--   这是菜单     --%>
        <div class="ul-box">
            <%--    子菜单,jq会自己加        --%>
        </div>
        <%--   这是页面展示--%>
        <div class="windows-box">
            <iframe style="user-select:none;" id="iframeSrc" src="">

            </iframe>
        </div>
    </div>
</div>
</body>
<script>
    //方法执行
    menuQueryAll();//父菜单动态添加
//==============================================================================================================
    //时间实时显示
    setInterval(function () {
        let dateGet=new Date();
        let dateText=dateGet.getFullYear() + "-" + (dateGet.getMonth()+1) + "-" + dateGet.getDate() + " " + dateGet.getHours() + ":" + dateGet.getMinutes() + ":" + dateGet.getSeconds() + "";
        $(".time-show").text(dateText);
    },1000);


    //动态添加父菜单
    function menuQueryAll() {
        $.ajax( {
            "url"          :  "MenuQueryAllServlet",
            "type"         :  "get",
            "data"         :  "data",
            "dataType" :  "text",
            "beforeSend": function() {
            },
            "success":  function(result) {
                var menuList=JSON.parse(result);
                console.log(menuList)
                //上来先删除一波子元素，管他有没有
                $(".ul-box").children().remove();
                var temp="";
                //根据查询的父菜单的结果数量进行循环
                for (var m in menuList){
                    temp=`
                        <div class="ul-li-box">
                            <div onclick="MenuClick()" class="actlive-li num-\${menuList[m].menu_id}">
                                <h4 style="user-select:none;">\${menuList[m].menu_name}</h4>
                            </div>
                        </div>
                     `;
                    //每循环一次就添加一次,并执行子菜单方法
                    $(".ul-box").append(temp);
                    menuChildrenQueryAll(menuList[m].menu_id);//子菜单动态添加
                }
            },
            "error":  function() {
                alert("网络异常")
            }
        } );
    }
    //子菜单添加
    function menuChildrenQueryAll(menuId) {
        $.ajax( {
            "url"          :  "MenuChildQueryByMenuIdServlet",
            "type"         :  "get",
            "data"         :  {"menuId":menuId},
            "dataType" :  "text",
            "beforeSend": function() {
            },
            "success":  function(result) {
                var menuChildList=JSON.parse(result);
                var temp="";
                for (var mc in menuChildList){
                    temp+=`
                      <div onclick="pageHandOff(\${menuChildList[mc].menu_child_url})" class="li-children">
                          <h3 style="user-select:none;">\${menuChildList[mc].menu_child_name}</h3>
                      </div>
           `;
                }
                let classElE=".num-"+menuId;//根据传参的父菜单id进行class名拼接
                console.log(classElE);
                $(classElE).siblings().remove();
                $(classElE).after(temp);
                // console.log(temp);
            },
            "error":  function() {
                alert("网络异常")
            }
        } );
    }




    <%--  父菜单点击事件  --%>
    let liShowFlag=true;
    function MenuClick(){
        $(".actlive-li").click(function () {
            //使他的兄弟姐妹显示（子菜单）
            if(liShowFlag){
                //除了自己，其他父菜单的元素失效且不展示他们的子菜单(已废弃)
                // $(".actlive-li").removeClass("li-selected").not($(this));
                // $(".actlive-li").siblings().css("display","none").not($(this));
                liShowFlag=false;
                $(this).siblings().css("display","flex");
                $(this).addClass("li-selected");
            }else {
                liShowFlag=true;
                $(this).siblings().css("display","none");
                $(this).removeClass("li-selected");
            }
        });
    }
    //页面切换
    function pageHandOff(srcGet) {
        var iframeSrc=document.getElementById("iframeSrc");
        console.log(srcGet);
        console.log(iframeSrc);
        iframeSrc.src=srcGet;
    }
</script>
</html>
